<!--
 * @Author: your name
 * @Date: 2021-08-06 15:20:51
 * @LastEditTime: 2021-08-06 16:47:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-ui\src\views\Articles.vue
-->
<template>
    <div class="articles">
        <!-- 头部 -->
        <Head></Head>
        <!-- 头部结束 -->
        <!-- 中间主体部分 -->
        <div class="content" v-loading="loading" v-if="article">
            <!-- 顶部图片 -->
            <div class="img">
                <img :src="article.cover" alt="">
            </div>
            <!-- /顶部图片结束 -->
            <!-- 文章内容 -->
            <div class="text">
                <div class="title">{{article.title}}</div>
                <div class="info">
                    {{article.category?article.category.name:'无'}}
                    作者：{{article.baseUser?article.baseUser.realname:'匿名'}}
                    <i class="el-icon-alarm-clock"></i>
                    {{article.publishTime | fmtDate}}
                    <i class="el-icon-view"></i>
                    {{article.readTimes}}
                </div>
                <div class="art_text" v-html="article.content"> </div>
            </div>
            <!-- /文章内容结束 -->
        </div>
        <!-- 中间主体部分结束 -->
        <!-- 底部 -->
        <Foot></Foot>
        <!-- 底部 -->
    </div>
</template>
<script>
import { get } from "../utils/request";
import Head from './components/Head.vue';
import Foot from './components/Foot.vue';
export default {
    components:{
        Head,Foot
    },
    data(){
        return {
            id:0,
            article:null,
            loading:false
        }
    },
    created(){
        this.id = this.$route.query.id;
        this.loadArticle();
    },
    methods:{
        loadArticle(){
            this.loading = true;
            let url = '/index/article/findById'
            get(url,{id:this.id}).then(resp => {
                this.article = resp.data;
                this.loading = false;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.articles{
    .content{
        width: 60%;
        margin: 0 auto;
        img{
            width: 100%;
        }
        .title{
            text-align: center;
            font-size: 22px;
            margin-top: 3em;
        }
        .info{
            text-align: center;
            color: yellowgreen;
            margin-top: .5em;
        }
        .art_text{
            font-size: 18px;
        }
    }
}
</style>
